<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Dashboard - Ace Admin</title>

	<meta name="description" content="overview &amp; stats" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
	<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

	<link rel="stylesheet" href="assets/css/ace.min.css" />
	<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
	<link rel="stylesheet" href="assets/css/ace-skins.min.css" />

</head>

<body>
	<div class="navbar navbar-inverse">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a href="#" class="brand">
					<small> <i class="icon-leaf"></i>
						商务合同管理系统
					</small>
				</a>

				<ul class="nav ace-nav pull-right">

					<li class="light-blue user-profile">
						<a data-toggle="dropdown" href="#" class="user-menu dropdown-toggle">
							<img class="nav-user-photo" src="assets/avatars/user.jpg" alt="Jason's Photo">
							<span id="user_info">
								<small>Welcome,</small>
								Jason
							</span> <i class="icon-caret-down"></i>
						</a>

						<ul class="pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer" id="user_menu">
							<li>
								<a href="#">
									<i class="icon-cog"></i>
									Settings
								</a>
							</li>

							<li>
								<a href="#">
									<i class="icon-user"></i>
									Profile
								</a>
							</li>

							<li class="divider"></li>

							<li>
								<a href="#">
									<i class="icon-off"></i>
									Logout
								</a>
							</li>
						</ul>
					</li>
				</ul>
				<!--/.ace-nav-->
			</div>
			<!--/.container-fluid-->
		</div>
		<!--/.navbar-inner-->
	</div>

	<div class="container-fluid" id="main-container">
		<a id="menu-toggler" href="#">
			<span></span>
		</a>

		<div id="sidebar">
			<div id="sidebar-shortcuts">
				<div id="sidebar-shortcuts-large">
					<button class="btn btn-small btn-success">
						<i class="icon-signal"></i>
					</button>

					<button class="btn btn-small btn-info">
						<i class="icon-pencil"></i>
					</button>

					<button class="btn btn-small btn-warning">
						<i class="icon-group"></i>
					</button>

					<button class="btn btn-small btn-danger">
						<i class="icon-cogs"></i>
					</button>
				</div>

				<div id="sidebar-shortcuts-mini">
					<span class="btn btn-success"></span>

					<span class="btn btn-info"></span>

					<span class="btn btn-warning"></span>

					<span class="btn btn-danger"></span>
				</div>
			</div>
			<!--#sidebar-shortcuts-->

			<ul class="nav nav-list">
				<li class="active">
					<a href="index.html">
						<i class="icon-dashboard"></i>
						<span>桌面</span>
					</a>
				</li>

				<li>
					<a href="contracts.html">
						<i class="icon-text-width"></i>
						<span>合同管理</span>
					</a>
				</li>

				<li>
					<a href="#" class="dropdown-toggle">
						<i class="icon-desktop"></i>
						<span>其他</span> <b class="arrow icon-angle-down"></b>
					</a>

					<ul class="submenu">
						<li>
							<a href="elements.html">
								<i class="icon-double-angle-right"></i>
								Elements
							</a>
						</li>

						<li>
							<a href="buttons.html">
								<i class="icon-double-angle-right"></i>
								Buttons &amp; Icons
							</a>
						</li>

						<li>
							<a href="treeview.html">
								<i class="icon-double-angle-right"></i>
								Treeview
							</a>
						</li>
					</ul>
				</li>

			</ul>

		</div>

		<div id="main-content" class="clearfix">
			<div id="breadcrumbs">
				<ul class="breadcrumb">
					<li>
						<i class="icon-home"></i>
						<a href="#">Home</a>

						<span class="divider">
							<i class="icon-angle-right"></i>
						</span>
					</li>
					<li class="active">桌面</li>
				</ul>
				<!--.breadcrumb-->

				<div id="nav-search">
					<form class="form-search">
						<span class="input-icon">
							<input type="text" placeholder="Search ..." class="input-small search-query" id="nav-search-input" autocomplete="off">
							<i class="icon-search" id="nav-search-icon"></i>
						</span>
					</form>
				</div>
				<!--#nav-search-->
			</div>

			<div id="page-content" class="clearfix">
				<div class="page-header position-relative">
					<h1>
						合同进展
						<small>
							<i class="icon-double-angle-right"></i>
							业绩统计 &amp; 回款统计
						</small>
					</h1>
				</div>
				<!--/.page-header-->
				<div class="row-fluid">
					<div class="row-fluid">
						<div class="span6">
							<div class="widget-box">
								<div class="widget-header widget-header-flat widget-header-small">
									<h5>业绩统计-甲方公司</h5>
								</div>
							</div>
							<div class="widget-body">
								<div class="widget-main">
									<div id="placeholder1" style="padding: 0px; position: relative;"></div>
								</div>
								<!--/widget-main-->
							</div>
						</div>
						<div class="span6">
							<div class="widget-box">
								<div class="widget-header widget-header-flat widget-header-small">
									<h5>业绩统计-乙方公司</h5>
								</div>
							</div>
							<div class="widget-body">
								<div class="widget-main">
									<div id="placeholder2" style="padding: 0px; position: relative;"></div>
								</div>
								<!--/widget-main-->
							</div>
						</div>
					</div>

					<div class="hr hr32 hr-dotted"></div>
					<div class="row-fluid">
						<div class="span12">
							<h3 class="header smaller blue">
									回款统计
							</h3>
							<div id="table-header">
								<h4 class="header smaller lighter blue">
									已回款汇总
								</h4>
							</div>
							<table id="table_bug_report" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<th class="center">
											<label>
												<input type="checkbox">
												<span class="lbl"></span>
											</label>
										</th>
										<th>合同名</th>
										<th class="hidden-480">甲方</th>
										<th class="hidden-480">乙方</th>
										<th>合同金额</th>
										<th>已回款</th>
										<th class="hidden-phone">回款比率</th>
										<th class="hidden-480">上次回款日期</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="center">
											<label>
												<input type="checkbox">
												<span class="lbl"></span>
											</label>
										</td>
										<td>统一移动平台</td>
										<td class="hidden-480">南航</td>
										<td class="hidden-480">恒拓</td>
										<td>30000</td>
										<td>6000</td>
										<td class="hidden-phone">20%</td>
										<td class="hidden-480">2013-5-30</td>
									</tr>

									<tr>
										<td class="center">
											<label>
												<input type="checkbox">
												<span class="lbl"></span>
											</label>
										</td>
										<td>变色龙</td>
										<td class="hidden-480">海航</td>
										<td class="hidden-480">知识动力</td>
										<td>40000</td>
										<td>20000</td>
										<td class="hidden-phone">50%</td>
										<td class="hidden-480">2013-4-6</td>
									</tr>
								</thead>
								</tbody>
							</table>
						</div>
					</div><!--table1-->

					<div class="row-fluid">
						<div class="span12">
							<div id="table-header">
								<h4 class="header smaller lighter blue">
									待回款
								</h4>
							</div>
							<table id="table_bug_report" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<th class="center">
											<label>
												<input type="checkbox">
												<span class="lbl"></span>
											</label>
										</th>
										<th>合同名</th>
										<th class="hidden-480">甲方</th>
										<th class="hidden-480">乙方</th>
										<th>合同金额</th>
										<th>回款金额</th>
										<th class="hidden-phone">比率</th>
										<th class="hidden-phone">申请时间</th>
										<th>备注</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="center">
											<label>
												<input type="checkbox">
												<span class="lbl"></span>
											</label>
										</td>
										<td>统一移动平台</td>
										<td class="hidden-480">南航</td>
										<td class="hidden-480">恒拓</td>
										<td>30000</td>
										<td>6000</td>
										<td class="hidden-phone">20%</td>
										<td class="hidden-phone">2013-5-30</td>
										<td>已提交</td>
									</tr>

									<tr>
										<td class="center">
											<label>
												<input type="checkbox">
												<span class="lbl"></span>
											</label>
										</td>
										<td>变色龙</td>
										<td class="hidden-480">海航</td>
										<td class="hidden-480">知识动力</td>
										<td>40000</td>
										<td>20000</td>
										<td class="hidden-phone">50%</td>
										<td class="hidden-phone">2013-4-6</td>
										<td>已提交</td>
									</tr>
								</thead>
								</tbody>
							</table>
						</div>
					</div><!--table2-->

					<div class="row-fluid">
						<div class="span12">
							<div id="table-header">
								<h4 class="header smaller lighter blue">
									应收款
								</h4>
							</div>
							<table id="table_bug_report" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<th class="center">
											<label>
												<input type="checkbox">
												<span class="lbl"></span>
											</label>
										</th>
										<th>合同名</th>
										<th class="hidden-480">甲方</th>
										<th class="hidden-480">乙方</th>
										<th>合同金额</th>
										<th>回款金额</th>
										<th class="hidden-phone">占比</th>
										<th>备注</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="center">
											<label>
												<input type="checkbox">
												<span class="lbl"></span>
											</label>
										</td>
										<td>统一移动平台</td>
										<td class="hidden-480">南航</td>
										<td class="hidden-480">恒拓</td>
										<td>30000</td>
										<td>6000</td>
										<td class="hidden-phone">20%</td>
										<td>尾款</td>
									</tr>

									<tr>
										<td class="center">
											<label>
												<input type="checkbox">
												<span class="lbl"></span>
											</label>
										</td>
										<td>变色龙</td>
										<td class="hidden-480">海航</td>
										<td class="hidden-480">知识动力</td>
										<td>40000</td>
										<td>20000</td>
										<td class="hidden-phone">50%</td>
										<td>首款</td>
									</tr>
								</thead>
								</tbody>
							</table>
						</div>
					</div><!--table3-->
				</div>
			</div>

		</div>
		<!--/#main-content-->
	</div>

	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/flot/jquery.flot.min.js"></script>
	<script src="assets/js/flot/jquery.flot.pie.min.js"></script>
	<script src="assets/js/flot/jquery.flot.resize.min.js"></script>
	<script src="assets/js/jquery.dataTables.min.js"></script>
	<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
	<script src="assets/js/ace-elements.min.js"></script>
	<script src="assets/js/ace.min.js"></script>

	<script type="text/javascript">

  			var data1 = [
				{ label: "深航",  data: 38.7, color: "#68BC31"},
				{ label: "海航",  data: 24.5, color: "#2091CF"},
				{ label: "南航",  data: 8.2, color: "#AF4E96"},
				{ label: "港交所",  data: 18.6, color: "#DA5430"}
			  ];
			
			  var placeholder1 = $('#placeholder1').css({'width':'90%' , 'min-height':'150px'});
			  $.plot(placeholder1, data1,{
				
				series: {
			        pie: {
			            show: true,
						highlight: {
							opacity: 0.25
						},
						stroke: {
							color: '#fff',
							width: 2
						},
						startAngle: 2
						// radius: 60,
      //                       label: {
      //                           show: true,
      //                           radius: 1,
      //                           formatter: function(label, slice) {
      //                               return '<div style="font-size:x-small;text-align:center;padding:2px;color:' + slice.color + ';">' + '<br/>' + Math.round(slice.percent) + '%</div>';
      //                           },
      //                           background: {
      //                               opacity: 0,
      //                               color: null
      //                           }
      //                       }
			        }
			    },
			    legend: {
			        show: true,
					position: "ne", 
				    labelBoxBorderColor: null,
					margin:[-30,15]
			    }
				,
				grid: {
					hoverable: true,
					clickable: true
				}
			 });

			  var data2 = [
				{ label: "恒拓",  data: 38.7, color: "#68BC31"},
				{ label: "知识动力",  data: 24.5, color: "#2091CF"}
			  ];
			
			  var placeholder2 = $('#placeholder2').css({'width':'90%' , 'min-height':'150px'});
			  $.plot(placeholder2, data2,{
				
				series: {
			        pie: {
			            show: true,
						highlight: {
							opacity: 0.25
						},
						stroke: {
							color: '#fff',
							width: 2
						},
						startAngle: 2
			        }
			    },
			    legend: {
			        show: true,
					position: "ne", 
				    labelBoxBorderColor: null,
					margin:[-30,15]
			    }
				,
				grid: {
					hoverable: true,
					clickable: true
				}
				
			 });
			
	</script>

</body>
</html>